<template>
  <div class="tags">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      :closable="tag.name !== 'home'"
      :effect="route.name === tag.name ? 'dark' : 'plain'"
      @click="handleMenu(tag)"
      @close="handleClose(tag, index)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAllDataStore } from '../stores/header.js'

const store = useAllDataStore()
const tags = computed(() => store.state.tags)
const route = useRoute()
const router = useRouter()
const handleMenu = (tag) => {
  router.push(tag.name)
  store.selectMenu(tag)
}
// 关闭 header tag
const handleClose = (tag, index) => {
  store.updateTags(tag) //这里执行pinia中的updateTags方法，把这个tab删除掉

  if (tag.name !== route.name) return // 如果关闭的不是当前页面,直接return
  // tags.length，这个长度是点击之前的tabs数量-1，
  // 因为上面我们删除了一个tab,如果删除的是最后一个
  if (index === store.state.tags.length) {
    store.selectMenu(tags.value[index - 1]) // 联动面包屑
    router.push(tags.value[index - 1].name) // 跳转到前一个tab
  } else {
    store.selectMenu(tags.value[index]) // 不是最后一个，让删除后处于这个索引的tab进行联动
    router.push(tags.value[index].name)
  }
}
</script>

<style lang="less" scoped>
.tags {
  margin: 10px 0 0 20px;
}

.el-tag {
  margin-right: 10px;
  cursor: pointer;
}
</style>
